<template>
    <el-drawer v-model="baTable.table.extend!.showInfo"  :close-on-click-modal="false" size="75%"   @close="baTable.toggleForm" >
        <template #header>
            <h4>详情</h4>
        </template>
        <template #default>
            <div>
                <el-row>
                    <el-col :span="22">
                        <div style="font-size: 20px;">
                            {{baTable.table.extend!.infoData.name}}  
                        </div>
                        <div style="display: flex;flex-direction: row;justify-content: flex-start;margin-top:20px" class="source-line">
                            <div>
                                <span class="source-title">房源状态：</span>
                                <span class="source-desc" >
                                    <span
                                        style="display: inline-block; width: 10px; height: 10px; border-radius: 50%"
                                        :class="'status-' + baTable.table.extend!.infoData.status"
                                    ></span>
                                    <span style="margin-left: 10px">{{baTable.table.extend!.infoData.status_text}}</span>
                                </span>
                            </div>
                            <div style="margin-left: 85px;">
                                <span class="source-title">发布人：</span>
                                <span class="source-desc">{{baTable.table.extend!.infoData.user?baTable.table.extend!.infoData.user['nickname']:''}}</span>
                            </div>
                        </div>

                        <div class="source-line" v-if="parseInt(baTable.table.extend!.infoData.status)==3" style="display: flex;flex-direction: row;padding: 16px;gap: 10px;align-self: stretch;background: #F6F6F6;">
                            <span class="source-title">驳回原因：</span>
                            <span style="color: red;font-size: 14px;" v-for="(item,index) in baTable.table.extend!.infoData.check_text" :key="index">{{item.check_mark}}</span>
                        </div>
                        <div style="display: flex;flex-direction: row;justify-content: flex-start;margin-top:20px" class="source-line">
                            <div v-for="(itemurl,index) in baTable.table.extend!.infoData.domain_images" :key="index" style="margin-right: 10px;">
                                <el-image
                                    style="width: 100px; height: 100px"
                                    :src="itemurl"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2"
                                    :preview-src-list="baTable.table.extend!.infoData.domain_images"
                                    :initial-index="4"
                                    fit="cover"
                                />
                            </div>
                        </div>
                        <div class="source-line" style="display: flex;flex-direction: row;padding: 16px;gap: 10px;align-self: stretch;background: #F6F6F6;">
                            {{baTable.table.extend!.infoData.introduction}}
                        </div>
                        <div class="source-line">
                            <span class="source-title">区域：</span>
                            <span class="source-desc">{{baTable.table.extend!.infoData.address_text}}</span>
                        </div>
                        <div class="source-line">
                            <span class="source-title">详细地址：</span>
                            <span class="source-desc">{{baTable.table.extend!.infoData.address}}</span>
                        </div>
                        <div class="source-line">
                            <span class="source-title">所属行业：</span>
                            <span class="source-desc"><span v-for="(item,index) in baTable.table.extend!.infoData.industry_text" :key="index">{{item}}</span></span>
                        </div>
                        <div class="source-line">
                            <span class="source-title">房源类型：</span>
                            <span class="source-desc"><span v-for="(item,index) in baTable.table.extend!.infoData.tags" :key="index">{{item}}</span></span>
                        </div><div class="source-line">
                            <span class="source-title">其它标签：</span>
                            <span class="source-desc"></span>
                        </div>
                        <div class="source-line">
                            <span class="source-title">悬赏金额：</span>
                            <span class="source-desc">{{baTable.table.extend!.infoData.reward}}</span>
                        </div><div class="source-line">
                            <span class="source-title">面积：</span>
                            <span class="source-desc">{{baTable.table.extend!.infoData.acreage}}</span>
                        </div>
                        <div class="source-line">
                            <span class="source-title">租金：</span>
                            <span class="source-desc">{{baTable.table.extend!.infoData.rent_money}}</span>
                        </div>
                        <div class="source-line">
                            <span class="source-title">预租期：</span>
                            <span class="source-desc">{{baTable.table.extend!.infoData.prorease_period}}</span>
                        </div>
                        <div class="source-line">
                            <span class="source-title">最短起租：</span>
                            <span class="source-desc">{{baTable.table.extend!.infoData.start_rent}}</span>
                        </div>
                        <div class="source-line">
                            <span class="source-title">免租期：</span>
                            <span class="source-desc">{{baTable.table.extend!.infoData.rent_free}}</span>
                        </div><div class="source-line">
                            <span class="source-title">支付方式：</span>
                            <span class="source-desc">{{baTable.table.extend!.infoData.paymethod_text}}</span>
                        </div>
                        <div class="source-line">
                            <span class="source-title">周边：</span>
                            <span class="source-desc"><span v-for="(item,index) in baTable.table.extend!.infoData.surround_text" :key="index">{{item}}</span></span>
                        </div><div class="source-line">
                            <span class="source-title">物业配套：</span>
                            <span class="source-desc"><span v-for="(item,index) in baTable.table.extend!.infoData.property_text" :key="index">{{item.name}}</span></span>
                        </div>
                    </el-col>
                </el-row>
               
            </div>
        </template>
        <template #footer>
            <div  style="text-align: right;" v-if="baTable.table.extend!.infoData">
                <el-button type="danger" v-if="baTable.table.extend!.infoData.status==2" @click="rejectHandle()">驳回</el-button>
                <el-button type="primary" v-if="baTable.table.extend!.infoData.status==2" @click="checkHandle(1,'通过')">通过</el-button>
                <el-button type="primary" v-if="baTable.table.extend!.infoData.status==1" @click="checkHandle(0,'下架')">下架</el-button>
                <el-button type="primary" v-if="baTable.table.extend!.infoData.status==0" @click="checkHandle(1,'上架')">上架</el-button>
                <el-button @click="cancelClick">关闭</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script setup lang="ts">
import type { DrawerProps } from 'element-plus'
import { inject, reactive, ref } from 'vue'
const drawer = ref(true)
const direction = ref<DrawerProps['direction']>('rtl')
const radio1 = ref('Option 1')
import type baTableClass from '/@/utils/baTable'

import { checkSumit } from '/@/api/backend/hourse'
import { ElMessageBox,ElNotification } from 'element-plus'
const baTable = inject('baTable') as baTableClass
const handleClose = (done: () => void) => {
  
}
function cancelClick() {
    baTable.table.extend!.showInfo =false
}
function rejectHandle(){
    baTable.form.operate! = 'check'
    // 您也可以使用 baTable.form.operate，默认情况它有三个值`Add、Edit、空字符串`，前两个值将显示添加和编辑弹窗
    // 您也可以再来个 loading 态，然后请求详情数据等
    baTable.table.extend!.infoLoading = true
    setTimeout(() => {
        baTable.table.extend!.infoLoading = false
    }, 200)
}
function checkHandle(statusVal:number,statusText:string='通过'){
    ElMessageBox.confirm('确定要'+statusText+'?')
        .then(() => {
            checkForm.id=baTable.table.extend!.infoData.id
            checkForm.status=statusVal
            confirmClick(baTable.table.extend!.infoData)
        })
        .catch(() => {
        // catch error
        })
}

const checkForm= reactive({
  check_mark: '',
  id: '',
  status:''
})
function confirmClick(row: TableRow) {
    console.log(row,'aaaa...')
    checkSumit(checkForm).then((result) => {
        checkForm.check_mark=''
        checkForm.id=''
        baTable.form.operate! = ''
        baTable.table.extend!.showInfo =false
        baTable.getIndex()
        ElNotification({
            title: '',
            message: result.msg,
            type: 'success',
        })
    }).catch((err) => {

    });
}
</script>
<style scoped>
:deep(.el-drawer__footer){
    text-align: left;
    box-shadow: var(--el-box-shadow);
}
.source-title{
    font-size: 14px;
    font-weight: normal;
    line-height: 22px;
    letter-spacing: 0em;
    color: rgba(0, 0, 0, 0.4);
}
.source-desc{
    font-size: 14px;
    font-weight: normal;
    line-height: 22px;
    letter-spacing: 0em;
    color: rgba(0, 0, 0, 0.9);
}
.source-line{
    padding:8px 0 
}
</style><style scoped lang="scss">
.status-0 {
    background-color: #a4a4a4; //已下架
}
.status-1 {
    background-color: #54d39e; //已经上架
}
.status-2 {
    background-color: #f99b59; //待审核
}
.status-3 {
    background-color: #ec4d4f; //已驳回
}
</style>
